<!DOCTYPE html>
<html>

<head>
    <title>todolist</title>
    <script type="text/javascript" src="../../vue.js"></script>
</head>

<body>

    <div id='app'>
        <input type="text" v-model="inputValue">
        <input type="submit" value="提交" @click="tijiao">

        <ul>
            <todo-list v-bind:content="itemValue" v-bind:index="itemKey" v-for="(itemValue,itemKey) in list" @delete="handleItemDelete">
            </todo-list>
        </ul>
    </div>

    <script type="text/javascript">
        var abc = {
            props: ['content', 'index'],
            //给每一个 li 绑定事件
            template: "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function() {
                    this.$emit('delete', this.index)
                }
            }
        }

        var obj = new Vue({
            el: '#app',
            components: {
                TodoList: abc
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                tijiao: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleItemDelete: function(index) {
                    this.list.splice(index, 1)
                }
            }
        });
    </script>
</body>

</html>